<template>
<div>
    <div id="container">
        <div id="header">
            <el-row>
                <el-col :span="8">
                    <div id="logo">
                        <h1>西北大学软件工程资产库平台</h1>
                    </div>
                </el-col>
                <el-col :span="8">
                    <ul id="nav">
                        <li><router-link to="/">首页</router-link></li>
                        <li><router-link to="/library/root">资产库</router-link></li>
                        <li><router-link to="/project">项目</router-link></li>
                        <li><router-link to="/my">我的</router-link></li>
                    </ul>
                </el-col>
                <el-col :span="8" id="right">
                <el-button id="button" v-if="!this.$store.state.login.isLogin" @click="login">登录/注册</el-button>
                <div v-else>
                    <span id="welcome">欢迎您，{{this.$store.state.login.username}}</span>&nbsp;&nbsp;<el-button id="button" @click="logout">注销</el-button>
                </div>
            </el-col>
            </el-row>
        </div>
        <div id="search">
            <div id="search-box">
                <el-input placeholder="请输入检索条件" v-model="search_input" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择" id="select">
                        <el-option label="关键字" value="1"></el-option>
                        <el-option label="课程" value="2"></el-option>
                        <el-option label="软件工程阶段" value="3"></el-option>
                        <el-option label="分类" value="4"></el-option>
                        <el-option label="标签" value="5"></el-option>
                        <el-option label="项目" value="6"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                </el-input>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:'HomeHeader',
    data:function(){
        return {
            search_input:'',
            select: '1'
        }
    },
    methods:{
        toLogin:function(){
            this.$router.push({ path: 'login' });
        },
        handleSearch:function(){
            // this.bus.$emit('search',this.search_input,this.select);
            if(this.search_input === ''){
                this.$message({
                    showClose: true,
                    message: '出错了，您没有输入检索条件',
                    type: 'error'
                });
                return;
            }
            this.$router.push({ path: 'search' ,query:{'query':this.search_input,'type':this.select}});
        },
        login:function(){
            this.$router.push({ path: '/login'});
        },
        logout:function(){
            this.$store.commit('clearToken');
            this.$router.push({ path: '/'});
        }
    }
}
</script>
<style lang="scss" scoped>
html{
    width: 100%;
    height: 100%;
    background-color: #ccc;
}
a{
    text-decoration: none;
    color: #fff;
}
#container{
    width:100%;
    height: 380px;
    background-image: url("~@/assets/pics/banner1.jpg");
    min-width: 1069px;
}
#header{
    width:100%;
    height:70px;
    line-height: 70px;
    color: #fff;
    padding-left:15%;
    padding-right: 15%;
    box-sizing:border-box;
    border-bottom: 0.1px rgba(255, 255, 255, 0.5) solid;
    // min-width: 1069px;
    #logo,h1,#nav,li{
        display: inline-block;
    }
    #logo{
        h1{
            font-size: 20px;
        }
    }
    #nav{
        float:right;
        li{
            width:60px;
            text-align: center;
        }
        min-width: 256px;
    }
    #right{
        padding-left: 20px;
        text-align: right;
    }
    #button{
        color: #fff;
        border:1px #fff solid;
        background-color: rgba(0,0,0, 0);
        padding-top: 7px;
        padding-bottom: 7px;
    }
}
#search{
    width: 100%;
    height: 290px;
    color: #fff;
    padding-left:15%;
    padding-right: 15%;
    box-sizing:border-box;
    position: relative;
    #search-box{
        width:50%;
        position: absolute;
        top:40%;
        left:50%;
        transform: translate(-50%,-50%);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
}
.el-select{
    width:130px;
    text-align: center;
    height: 50px;
}
.input-with-select >>> .el-input__inner{
    height: 50px;
    line-height: 50px;
}
</style>